<template>
  <a-layout-content>
    <div class="container-fluid">
      <div class="row">
        <div class="col" style="display:flex">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%;flex:10;"
            height="100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="手机号">
                    <span>{{ props.row.info.phonenum }}</span>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <span>{{ props.row.info.age }}</span>
                  </el-form-item>
                  <el-form-item label="性别">
                    <span>{{ sex(props.row.info.sex )}}</span>
                  </el-form-item>
                  <div class="row">
                    <div class="col">问题ID</div>
                    <div class="col">用户答案</div>
                  </div>
                  <div
                    class="row"
                    v-for="(vo, i) in props.row.info.answers"
                    :key="`1answer${i}`"
                    style="border-bottom: 1px solid #eee;"
                  >
                    <div class="col">{{i}}</div>
                    <div class="col">{{vo}}</div>
                  </div>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="ID" sortable label="ID" width="100"></el-table-column>
            <el-table-column prop="name" sortable label="姓名"></el-table-column>
            <el-table-column prop="created_at" label="答题时间"></el-table-column>
            <el-table-column prop="updated_at" label="教师审批时间"></el-table-column>
            <el-table-column label="教师">
              <template slot-scope="scope">
                <span
                  v-text="getUser.find(v=> v.userid ==getTeacheritembanks.find(v=> v.ID == scope.row.teacheritembankid).uid).username"
                ></span>
              </template>
            </el-table-column>
            <el-table-column prop="issee" label="是否审核">
              <template slot-scope="props">
                <span v-show="props.row.issee">已审核</span>
                <span v-show="!props.row.issee">没有审核</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, this.tableData.length]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.tableData.length"
      ></el-pagination>
    </div>
  </a-layout-content>
</template>

<script>
import { asyncanswer, asyncgetteacheritembanks } from "@/plugins/api.js";
import { mapGetters } from "vuex";
export default {
  name: "answer",
  data() {
    return {
      pagesize: 20,
      currentPage: 1,
      paths: [
        {
          name: "用户答题",
          path: "/itembank/answer"
        }
      ],
      tableData: [],
      list: []
    };
  },
  computed: {
    ...mapGetters(["getUser", "getTeacheritembanks"])
  },
  async mounted() {
    await this.start();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    sex(i) {
      switch (Number(i)) {
        case 1:
          return "男";
        case 2:
          return "女";
      }
    },
    async start() {
      try {
        this.tableData = await asyncanswer();
      } catch (err) {
        console.log(err);
      }
      const arrer = await asyncgetteacheritembanks();
      console.log(arrer);
      console.log(this.tableData);
      //   const add =[]
      //   for(let i in this.tableData){
      //     add.push(JSON.parse(JSON.stringify(await asyncgetteacheritembanks({ID:this.tableData[i].teacheritembankid}))))
      //   }
      //  for(let j in add){
      //   this.list.push(this.getUser.find(v=> v.userid == add[j][0].uid).username)
      //  }
      //  console.log(this.list)
    }
  }
};
</script>
